<template>
    <div class="bg-white-700 text-white flex justify-between items-center">
        <!-- 标签管理   在用户点击或则切换标签的时候执行 tabChange -->
        <el-tabs v-model="activeTab" type="card"  class="demo-tabs" @tab-remove="removeTab"  @tab-change="tabChange"style="min-width: 10px;">
            <!-- 根据条件判断是否可以被关闭 closable -->
            <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path" :closable="item.path != '/admin/index'">
            </el-tab-pane>
        </el-tabs>
        
        <!-- 右侧下拉菜单 -->
        <span>
            <el-dropdown @command="handleCloseTab">
                <span class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>

</template>
<script setup>
import {useTagList}  from '@/composables/useTagList'
// import { useTagList } from '@/composables/useTagList' 表示导出的是一个函数 函数中有返回值return


const {  activeTab, tabList, tabChange, removeTab, handleCloseTab ,ArrowDown} = useTagList()
</script>


<style scoped>
.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.items-center {
    align-items: center;
}
</style>